<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--[if lt IE 9]>
    <script src="../js/jquery-1.11.3.js"></script>
    
<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="../js/jquery-3.1.1.js"></script>
		<!--<![endif]-->
		<script type="text/javascript">
			$(function() {
				$("#btn1").click(function() {
					$("p").append(" <b>追加文本</b>。");
					$("p").prepend("<b>在开头追加文本</b>。 ");
				});

				$("#btn2").click(function() {
					$("ol").append("<li>追加列表项</li>");
					$("ol").prepend("<li>在开头添加列表项</li>");
				});

				$("#div3 #btn1").click(function() {
					$("img").before("<b>之前</b>");
					$("img").after("<i>之后</i>");
				});
				$("#d1btn3").click(function() {
					$("<span>before !</span>").prependTo("#d1p1");
					$("<span>after !</span>").appendTo("#d1p1");
				});

			});

			function appendText() {
				var txt1 = "<p>文本1。</p>"; // 使用 HTML 标签创建文本
				var txt2 = $("<p/>").text("文本2。"); // 使用 jQuery 创建文本
				var txt3 = document.createElement("p");
				txt3.innerHTML = "文本3。"; // 使用 DOM 创建文本 text with DOM
				$("#div2").append(txt1, txt2, txt3); // 追加新元素
			}
			function insert() {
				$("<span>world </span>").insertAfter("#div11 p");
				$("<span>Hello</span>").insertBefore("#div11 p");
				
			}
			function afterText() {
				var txt1 = "<b>I am</b>"; // 使用 HTML 创建元素
				var txt2 = $("<i></i>").text("love "); // 使用 jQuery 创建元素
				var txt3 = document.createElement("big"); // 使用 DOM 创建元素
				txt3.innerHTML = "jQuery!";
				$("#diimg4").after(txt1, txt2, txt3); // 在图片后添加文本
			}

			function funclone() {
				var txt1 = "<b>I am</b>"; // 使用 HTML 创建元素
				var txt2 = $("<i></i>").text("love "); // 使用 jQuery 创建元素
				$("#d5m1").after(txt2.clone()); // 在图片后添加文本
			}

			function funempty() {
				$("#div6 div").empty();
			}

			function funremove() {
				$("#div7 p:last").remove();

			}

			function funreplace() {
				//$("<span><b>Hello world!</b></span>").replace("p:last");
				$("#div8 p:last").replaceWith("<span><b>Hello world!</b></span>");
			}

			function funreplaceall() {
				$("<span><b>Hello world!</b></span>").replaceAll("#div9 p");
			}

			function funreplacecall() {
				$("#div10 p").replaceWith(function(n) {
					return "<h3>这个元素的下标是 " + n + ".</h3>";
				});
			}
		</script>
		<style type="text/css">
			div {
				border: 1px solid black;
				margin-top: 8px;
			}
		</style>
	</head>

	<body>
		<div id="div1">
			<h2>dom的append</h2>
			<p>这是一个段落。</p>
			<p id="d1p1">这是另外一个段落。</p>
			<ol>
				<li>List item 1</li>
				<li>List item 2</li>
				<li>List item 3</li>
			</ol>
			<button id="btn1">添加文本</button>
			<button id="btn2">添加列表项</button>
			<button id="d1btn3">append to</button>
		</div>

		<div id="div3">
			<h2>插入 after</h2>

			<img src="/images/logo.png">
			<br><br>
			<button id="btn1">前后插入</button>

		</div>

		<div id="div2">
			<h2>内部追加文本</h2>

			<p>这是一个段落。</p>
			<button onclick="appendText()">追加文本</button>

		</div>
		<div id="div4">
			<h2>外部追加文本</h2>
			<img id="diimg4" src="/images/logo.png">
			<button onclick="afterText()">追加文本</button>

		</div>
		<div id="div11">
			<h2>insert after</h2>
					<button onclick="insert()">在P元素后面插入span元素</button><br>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

		</div>
		

		<div id="div5">
			<h2>clone</h2>
			<img id="d5m1" src="/images/logo.png">
			<button onclick="funclone()">追加clone文本</button>

		</div>
		<div id="div6">
			<h2>empty</h2>

			<div style="height:100px;width:100px;background-color:yellow">
				这是一些文本。
				<p>这是div块中的一个段落。</p>
			</div>

			<button onclick="funempty()">移除div块中的内容</button>

		</div>
		<div id="div7">
			<h2>remove 元素</h2>
			<div style="height:100px;width:300px;">
				这是一些文本。
				<p id="d6s1p1">这是div块中的一个段落。</p>
				<p>这是div块中的一个段落。</p>
			</div>
			<p>这是div块外部的一个段落。</p>
			<button onclick="funremove()">移除span块中的内容</button>
		</div>

		<div id="div8">
			<h2>replace only 元素</h2>
			<button onclick="funreplace()">用一个span元素替换最后一个p元素</button>
			<br>
			<p>这是一个段落。</p>
			<p>这是另一个段落。</p>
		</div>
		<div id="div9">
			<h2>replace all 元素</h2>
			<button onclick="funreplaceall()">用一个span元素替换p元素</button>
			<br>
			<p>这是一个段落。</p>
			<p>这是另一个段落。</p>
		</div>
		<div id="div10">
			<h2>replace 元素 by function</h2>
			<button onclick="funreplacecall()">用一个span元素替换p元素</button>
			<br>
			<p>这是一个段落。</p>
			<p>这是另一个段落。</p>
		</div>
	</body>

</html>